<template>
	<view>
		<!-- 顶部背景 -->
		<view>
			<image class="topBg" src="https://qykh.shopec.com.cn/image-server/dz/activityCar_topBg.png" mode=""></image>
		</view>

		<!-- 活动内容 -->
		<view class="contentBox">
			<view class="title">
				活动内容
			</view>
			<view class="activit-content">
				{{activityInfo.activityContent}}

			</view>
		</view>

		<!-- 适用产品 -->
		<view class="contentBox" v-if="activityInfo.activityGoodsList.length > 0">
			<view class="title">
				适用产品
			</view>
			<view class="car-content">
				<carItem v-for="(item, index) in activityInfo.activityGoodsList" :key="item.planId" :carInfo="item"
					:bizType="activityInfo.bizType" @configOrder="configOrder" viewType="2"></carItem>

			</view>
		</view>
		
		
		<!-- 门店 -->
		<view class="store-content">
			<view class="info">
				<text class="time">活动时间:{{activityInfo.startTime}}至{{activityInfo.endTime}}</text>
				<view class="storeInfo">
					<text class="storeTitle">活动门店:</text>
					<view class="storeBox">
						<text v-for="(item, index) in activtiyStoreList" :key="index">{{item}}</text>
					</view>
				</view>
			</view>
		</view>
		
		<view style="height: 20rpx;"></view>
         
        <u-popup :show="showShortAlert" mode="bottom" @close="showShortAlert=false">
        	<configShortOrder :activityId="activityInfo.activityId" :businessNo="activityInfo.bizType"
        		:carInfo="currentCar"></configShortOrder>
        </u-popup>
        
        <u-popup :show="showLongAlert" mode="bottom" @close="showLongAlert=false">
        	<configLongOrder :activityId="activityInfo.activityId" :businessNo="activityInfo.bizType"
        		:carInfo="currentCar"></configLongOrder>
        </u-popup>
      
	</view>
</template>

<script>
	import carItem from '@/pagesB/activity/template/components/car-item.vue'
	import configShortOrder from '@/pagesB/activity/template/components/activity-configShortOrder.vue'
	import configLongOrder from '@/pagesB/activity/template/components/activity-configLongOrder.vue'
	import {
		apiActivityInfo,
		insertActivityBrowseRecords
	} from '@/api/activity-api.js';
	export default {
		components: {
			carItem,
			configShortOrder,
			configLongOrder
		},
		data() {
			return {
				showShortAlert: false, //短租|豪车
				showLongAlert: false, //长租
				activityId: '',
				activityInfo: {},
				activtiyStoreList: [],
				currentCar: {},
				startTime: 0,
				endTime: 0,
			}
		},
		computed: {
		  	memberNo() {
				return this.$store.state.user.userInfo.memberNo
			},
			duration() {
				return this.endTime - this.startTime;
			}
		},
		beforeDestroy() {
			this.insertActivityBrowseRecords()
		},
		onReady() {
			this.$store.dispatch('order/getOrderTime');
			this.$store.dispatch('order/getLongOrderTime');
		},
		onLoad(op) {
			wx.showShareMenu({
				withShareTicket:true,
			  menus: ['shareAppMessage']
			})
			//记录进去页面的时间
			this.startTime = new Date().getTime();
			//管理端海报活动分享进来
			if (op && op.scene) {
				let scene = op && op.scene.split('_');
				let activityId = scene[0]; //activityId
				this.activityId = activityId;
			} else {
				this.activityId = op.activityId;
			}
			this.getActivityInfo();
		},
		methods: {
			insertActivityBrowseRecords() {
				//记录离开页面的时间
				this.endTime = new Date().getTime();
				insertActivityBrowseRecords({
					bizNo: this.activityId,
					memberNo: this.memberNo,
					browseDuration: this.duration,
					tenantId: this.$store.state.user.tenantId,
					activityType: 5
				}).then(res => {})
			},
			//获取活动详情
			getActivityInfo() {
				apiActivityInfo({
					tenantId: this.$store.state.user.tenantId,
					activityId: this.activityId
				}).then(res => {
					this.activityInfo = res.data;
					if (this.activityInfo.storeName) {
						this.activtiyStoreList = this.activityInfo.storeName.split(',');
					}
				})
			},
			// 配置订单信息
			configOrder(carInfo) {
				console.log(carInfo);
				this.currentCar = carInfo;
				this.showShortAlert = true;
			}
		}
	}
</script>

<style lang="scss">
	page {
		background-color: #0069FF;
	}

	.topBg {
		width: 100%;
		height: 640rpx;
	}

	.contentBox {
		margin: 50rpx 20rpx 60rpx;
		background-color: #fff;
		border-radius: 30rpx;
		display: flex;
		flex-direction: column;
		align-items: center;

		.title {
			width: 340rpx;
			height: 84rpx;
			line-height: 84rpx;
			background-image: url('https://qykh.shopec.com.cn/image-server/dz/activityCar_titleBg.png');
			background-size: 100% 100%;
			text-align: center;
			font-size: 36rpx;
			font-weight: bold;
			text-shadow: #0069ff 1px 0 10px;
			color: #fff;
			letter-spacing: 2rpx;
			position: relative;
			top: -28rpx;

		}
	}

	.activit-content {
		width: 85%;
		padding: 10rpx 50rpx 30rpx;
	    color: #666;
		font-size: 28rpx;
		line-height: 2em;
       
		
	}

	.car-content {
		width: 94%;
		padding: 20rpx 10rpx;
		display: flex;
		flex-wrap: wrap;
		justify-content: space-between;
		align-items: center;

	}
	
	.store-content {
		margin: 0 20rpx;
		padding: 30rpx 0;
		background: #ffffff;
		border-radius: 30rpx;
		// width: 94%;
		display: flex;
		flex-direction: column;
		align-items: center;
	
		.info {
			display: flex;
			flex-direction: column;
	
			.time {
				color: #666;
				font-size: 28rpx;
				font-weight: bold;
			}
	
			.storeInfo {
				display: flex;
				justify-content: center;
	
				.storeTitle {
					color: #333;
					font-size: 30rpx;
					font-weight: bold;
				}
	
				.storeBox {
					display: flex;
					flex-direction: column;
					justify-content: flex-start;
					color: #333;
					font-size: 30rpx;
					font-weight: bold;
				}
			}
		}
	}
	
</style>
